<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		/* 练习：1.圆形  2.正三角形
		 思路1：宽高与边框倒角一致
		 */
		div#cirle{
			width: 400px;
			height:400px;
			border: 1px solid pink;
			border-radius: 50%;
			/* 边框阴影 box-shadow 属性 */
			box-shadow: 5px 5px 50px 50px pink inset;
		}
		/*思路2：div#d1    css中  抓到div
		                左边框：50像素实线红色
						右边框：50像素实线黄色
						下边框：50像素实现黑色
		注意：先别加宽高  transport  透明色*/
		div#triangle{
			width: 0;
			/*border-left:50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 50px solid black;
			两行：倒三角，蓝色，透明度.3 
			提醒：所有边框：50px solid transparent
			      上边框颜色改成蓝色  0，0，255*/
			border:50px solid transparent ;
			border-right-color:rgba(194, 245, 255, 0.3);
		}
		/* outline 边框轮廓 只针对input 元素 */
		input{
			online:1px solid red;
		}
		/* 实际应用：通配选择器 去掉轮廓
		 *{ outline:0; }
		 
		 */
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>